.header{
    width: 100%;
    height: 272px;
    background: url('@/assets/approvals/oaBg.png') no-repeat;
    background-size: 100% 100%;
}

// 审批页面骨架屏容器样式
.approval-skeleton {
  padding: 20px;
}

.oa-tab{
    display: flex;
    justify-content: space-between;
    padding: 0 8vw;
    margin-top: 49px;
    .tab-li{
        position: relative;
        text-align: center;
        img{
            display: block;
            margin: auto;
           width: 60px;
           height: 60px;
        }
        span{
            display: inline-block;
            margin-top: 18px;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 500;
            font-size: 24px;
            color: #333333;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
        .num{
            position: absolute;
            right: -20px;
            top: 2px;
            width: 28pt;
            height: 16pt;
            background: url('@/assets/approvals/mesNum.png') no-repeat;
            background-size: 100% 100%;
            color: #ffffff;
            line-height: 16pt; 
            text-align: center;
            font-size: 11pt;
            font-family: Source Han Sans CN-Medium;
        }
        .tab-active{
            width: 45px;
            height: 10px;
            margin-top: 16px;
        }
    }
}

img {
    cursor: pointer;
}

.black-left {
    width: 50px;
}

.search {
    width: 40px;
}

// 内容区域样式
.content {
    // padding: 16px;
    background-color: #fff;
    min-height: calc(100vh - 284px);
}

// 搜索容器
.search-container {
    padding: 20px 32px 11px 32px; // 与列表项保持一致的左右边距
    margin-bottom: 16px;
    background-color: #fff;
    
    // 确保搜索组件内部对齐
    :deep(.SearchInput) {
        align-items: center;
        .van-cell-group--inset{
            margin: 0!important;
        }
        .van-cell-group {
            .van-cell {
                padding: 0 16px; // 内边距优化
                
                .van-field {
                    .van-field__control {
                        font-size: 28px; // 与页面其他文字大小保持一致
                        line-height: 1.4;
                    }
                }
            }
        }
        
        .label {
            text-align: center;
            min-width: 80px; // 确保标签有足够宽度
        }
    }
}

// 加载状态
.loading-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
}

// 列表容器
.list-container {
    margin-left: 39px;
    margin-right: 32px;
    .list-item {
        background: #ffffff;
        // border-radius: 12px;
        // padding: 16px;
        padding-bottom: 49px;
        padding-top: 41px;
        // padding:40px 32px 40px 39px;
        // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        position: relative;
        cursor: pointer;
        // transition: all 0.3s ease;
        border-bottom: 2px #E5E5E5 solid;
        &:hover {
            // box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }
 
        // &:last-child {
        //     margin-bottom: 0;
        // }

        // 审批人和状态标识行
        .approval-status-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px;
            padding-top: 12px;
            // border-top: 1px solid #f0f0f0;
        }

        // 审批人信息
        .approver-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        // 审批人头像容器
        .approver-avatar {
            width: 40px;
            height: 40px;
            padding: 4px 6px;
            background: #2D67B0;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        // 审批人图标
        .approver-icon {
            color: #FFFFFF;
            font-size: 38px;
        }

        // 审批人文字
        .approver-text {

            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 500;
            font-size: 26px;
            color: #C1C1C1;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }
    }
}

// 列表项头部
.item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    
    .item-title {

        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: bold;
        font-size: 30px;
        color: #171A1D;
        letter-spacing: 1px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
    
    .item-no {
        font-size: 20px;
        color: #C1C1C1;
        // background: #f0f0f0;
        padding: 2px 8px;
        // border-radius: 4px;
        white-space: nowrap;
        font-weight: 500;
    }
}

// 详细信息
.item-details {
    margin-bottom: 12px;
    
    .detail-row {
        display: flex;
        margin-bottom: 6px;
        
        &:last-child {
            margin-bottom: 0;
        }
        
        .label {

            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 26px;
            color: #666666;
            letter-spacing: 1px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
        
        .value {

            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 26px;
            color: #666666;
            letter-spacing: 1px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            // 文本溢出显示省略号
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1; // 确保value占据剩余空间
            
            // &.amount {
            //     color: #ff6b35;
            //     font-weight: 600;
            // }
        }
    }
}

// 元信息
.item-meta {
    // border-top: 1px solid #f0f0f0;
    // padding-top: 12px;
    // margin-bottom: 12px;
    
    .meta-row {

        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 26px;
        color: #666666;
        letter-spacing: 1px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        
        &:last-child {
            margin-bottom: 0;
        }
        
        .label {

            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 26px;
            color: #666666;
            letter-spacing: 1px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
        
        .value {

            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 26px;
            color: #666666;
            letter-spacing: 1px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }
}

// 状态标识
.status-badge {
    // font-size: 11px;
    padding: 4px 8px;
    border-radius: 12px;
    // font-weight: 500;
    
    &.status-pending {
        // background: #fff7e6;
        // color: #fa8c16;
        // border: 1px solid #ffd591;

        background: rgba(255,146,58,0.1);
        border-radius: 0px 0px 0px 0px;
        border: 1px solid #FF923A;
        color: #FF923A;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 26px;
        
        text-align: center;
        font-style: normal;
        text-transform: none;
    }
    
    &.status-processed {
        background: #f6ffed;
        color: #52c41a;
        border: 1px solid #b7eb8f;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 26px;
        
        text-align: center;
        font-style: normal;
        text-transform: none;
    }
    
    &.status-completed {
        background: #e6f7ff;
        color: #1890ff;
        border: 1px solid #91d5ff;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 26px;
        
        text-align: center;
        font-style: normal;
        text-transform: none;
    }
    
    &.status-received {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 26px;
        color: #999999;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }
    &.status-revoked {
        background: #eee;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid #999999;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 26px;
        color: #999999;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }
    &.status-rejected {
        background: rgba(255,82,25,0.1);
        border-radius: 0px 0px 0px 0px;
        border: 1px solid #FF5219;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 26px;
        color: #FF5219;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }
}

// 空状态
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    
    .empty-icon {
        margin-bottom: 16px;
        opacity: 0.6;
    }
    
    .empty-text {
        font-size: 14px;
        color: #999999;
        text-align: center;
    }
}

// 响应式设计
// @media (max-width: 768px) {
//     .content {
//         padding: 12px;
//     }
    
//     .list-container .list-item {
//         padding: 12px;
//         margin-bottom: 8px;
//     }
    
//     .item-header .item-title {
//         font-size: 15px;
//     }
    
//     .item-details .detail-row {
//         .label {
//             min-width: 60px;
//             font-size: 12px;
//         }
        
//         .value {
//             font-size: 12px;
//         }
//     }
// }
// 空状态样式
.empty-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    font-size: 28px;
    color: #666;
    
    .empty-image {
      width: 355px;
      height: 355px;
      object-fit: contain;
    }
  }